$dropdown: (
  'width': 100%,
);

$dropdown-readonly-text-item: (
  'color': getCssVar(form-item, text-color),
);

@include b(dropdown) {
  width: getCssVar('dropdown', 'width');
  @include set-component-css-var('dropdown', $dropdown);
  @include set-component-css-var('dropdown-readonly-text-item', $dropdown-readonly-text-item);

  // 父选项节点样式
  @include e(branch-node){
    >.el-tree-node__content {
      // 父节点禁用时文本还是正常颜色
      #{getCssVarName(color, disabled, text)}: getCssVar(color,text,0);
    }
  }

  .el-select {
    width: 100%;
  }
}

@include b(dropdown-readonly-text-item){
  margin-right: getCssVar(spacing, tight);
  font-size: getCssVar(form-item, font-size);
  line-height: getCssVar(editor, default, line-height);
  color: getCssVar(dropdown, readonly-text-item-color);

  @include b(icon){
    @include flex(row, center, center);

    width: getCssVar(width-icon, medium);
    height: getCssVar(width-icon, medium);
    margin-right: getCssVar(spacing, extra-tight);   
    font-size: getCssVar(font-size, regular);
  }
}

.el-select-dropdown__item{
  width: 100%;
  background-color: getCssVar(dropdown, select-option-item-bkcolor);
}

@include b(dropdown-select-option-content) {
  @include flex(row, flex-start, center);

  @include e(text) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @include b(icon){
    @include flex(row, center, center);

    width: getCssVar(width-icon, medium);
    height: getCssVar(width-icon, medium);
    margin-right: getCssVar(spacing, extra-tight);    
    font-size: getCssVar(font-size, regular);    
  }

  width: 100%;
  height: 100%;  
  color: getCssVar(dropdown, select-option-item-color);
}

// 表单下的下拉框默认显示，悬浮上去显示编辑器
@include b(dropdown-form-default-content){
  display: none;
}

@include b(form-item){

  @include b(dropdown) {
    @include when(show-default){
      // 悬浮显示编辑器
      &:hover{
        @include b(dropdown-form-default-content){
          display: none;
        }     
        @include b(dropdown-select){
          display: block;    
        }       
      }    
      
      // 不悬浮时显示信息态
      @include b(dropdown-form-default-content){
        display: flex;
        align-items: center;     
        width: 100%;
        padding: getCssVar(form-item, hover-edit-padding);
        font-family: Arial, sans-serif;;
        font-size: getCssVar(form-item, font-size);
        line-height: getCssVar(editor, default, line-height);
        color: getCssVar(form-item, text-color);
  
        @include when(multiple){
          height: getCssVar(editor, default, line-height);
          @include b(dropdown-content-item){
            height: calc(getCssVar(editor, default, line-height) - getCssVar('spacing', 'tight'));
            padding: 0 getCssVar('spacing', 'tight');
            margin: 2px 6px 2px 0;
            font-size: getCssVar(font-size, small);
            line-height: calc(getCssVar(editor, default, line-height) - getCssVar('spacing', 'tight'));
            color: getCssVar(editor, default, text-color);
            background-color: getCssVar(color, fill-0);
            border: 1px solid transparent;
            border-radius: getCssVar(border-radius, small);
          }
        }
      }
      
      @include b(dropdown-select){
        display: none;

        .el-input__prefix-inner>:last-child {
          margin-right: getCssVar('spacing', 'none');
        }
      }
      
      // 输入态
      @include when(editable){
        @include b(dropdown-form-default-content){
          display: none;
        }     
        @include b(dropdown-select){
          display: block;    
        }  
      }
    }
  }
}

@include b(form-item){

  @include b(dropdown) {
    @include m(round) {
      @include when(show-default){
        @include b(dropdown-form-default-content){
          display: flex;
          align-items: center;     
          width: 100%;
          height: var(--el-component-size);

          @include when(multiple){
            height: var(--el-component-size);

            @include b(dropdown-content-item){
              height: auto;
              padding: getCssVar('spacing', 'none') getCssVar('spacing', 'base');
              margin: getCssVar('spacing', 'none');
              margin-right: getCssVar('spacing', 'extra-tight');
              font-size: inherit;
              line-height: getCssVar('spacing', 'loose');
              color: getCssVar(dropdown, select-option-item-color);
              background-color: getCssVar(dropdown, select-option-item-bkcolor);
              border: none;
              border-radius: getCssVar('spacing', 'base');
            }
          }
        }

        @include b(dropdown-select) {
          .el-select__tags {
            display: none;
          }
        }

        @include b(dropdown-content-item){
          flex: 0 0 auto;
          padding-right: getCssVar('spacing', 'base');
          padding-left: getCssVar('spacing', 'base');
          margin-right: getCssVar('spacing', 'extra-tight');
          line-height: getCssVar('spacing', 'loose');
          color: getCssVar(dropdown, select-option-item-color);
          background-color: getCssVar(dropdown, select-option-item-bkcolor);
          border-radius: getCssVar('spacing', 'base');
        }
      }
    }
  }
}

@include b(dropdown) {
  @include m(round) {
    @include b(dropdown-readonly-text-item){
      display: inline-flex;
      align-items: center;
      padding-right: getCssVar('spacing', 'base');
      padding-left: getCssVar('spacing', 'base');
      margin-right: getCssVar('spacing', 'extra-tight');
      line-height: getCssVar('spacing', 'loose');
      color: getCssVar(dropdown, select-option-item-color);
      background-color: getCssVar(dropdown, select-option-item-bkcolor);
      border-radius: getCssVar('spacing', 'base');

      &:first-child {
        margin-left: calc(getCssVar('spacing', 'base-tight') - getCssVar('spacing', 'super-tight') / 2);
      }
    }

    @include b(dropdown-select) {
      .el-select__tags {
        display: none;
      }

      .el-input__inner {
        flex: 1 1 0;
        opacity: 0;
      }
    }

    @include b(dropdown-select-option-text){
      display: inline-flex;
      align-items: center;
      padding-right: getCssVar('spacing', 'base');
      padding-left: getCssVar('spacing', 'base');
      margin-right: getCssVar('spacing', 'extra-tight');
      line-height: getCssVar('spacing', 'loose');
      color: getCssVar(dropdown, select-option-item-color);
      background-color: getCssVar(dropdown, select-option-item-bkcolor);
      border-radius: getCssVar('spacing', 'base');
    }
  }
}

@include b(dropdown-popper) {
  @include m(round) {
    .el-select-dropdown__item {
      display: flex;
      align-items: center;
      height: calc(getCssVar('spacing', 'extra-loose') + getCssVar('spacing', 'extra-tight'));
      line-height: calc(getCssVar('spacing', 'extra-loose') + getCssVar('spacing', 'extra-tight'));
      background-color: transparent;
    }

    @include b(dropdown-select-option-content){
      flex: 0 0 auto;
      width: auto;
      min-width: 0;
      height: auto;
      padding-right: getCssVar('spacing', 'base');
      padding-left: getCssVar('spacing', 'base');
      line-height: getCssVar('spacing', 'loose');
      color: getCssVar(dropdown, select-option-item-color);
      background-color: getCssVar(dropdown, select-option-item-bkcolor);
      border-radius: getCssVar('spacing', 'base');
    }
  }
}